<template>
  <div class="Document_browsing">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dDownMain">
        <div
          v-loading="xml_loading"
          class="twoBox"
          :style="
            this.$route.query.Token
              ? 'top:50px;left:10px'
              : 'top: 100px;padding:15px'
          "
          v-if="isShow"
        >
          <div>
            <el-button v-if="path" size="small" @click="return_Home"
              >返回首页</el-button
            >
            <el-button size="small" @click="return_Last" v-if="path"
              >返回上一级</el-button
            >
          </div>
          <!-- <el-card
            class="box-card"
            style="width:16%;display:inline-block;margin:10px"
            v-for="(val,i) in word_NewList"
            :key="i"
            @click.native="card_click(val)"
          >
            <i
              class="el-icon-folder"
              style="font-size:36px;margin-right:30px"
            ></i>
            <span style="font-size:22px">{{val.Name}}</span>
          </el-card> -->
          <el-card
            class="box-card"
            style="width:18%;display:inline-block;margin:10px;"
            v-for="(val, i) in word_NewList"
            :key="i"
            @click.native="card_click(val)"
            shadow="hover"
          >
            <i
              :class="isFile == 1 ? 'el-icon-tickets' : 'el-icon-folder'"
              style="font-size:36px;margin-right:30px"
            ></i>
            <el-tooltip
              class="item"
              effect="dark"
              :content="val.Name"
              placement="top"
              :open-delay="300"
            >
              <span
                style="font-size:10px;"
                v-text="val.Name"
                class="card_style"
              ></span>
            </el-tooltip>
          </el-card>
          <!-- 弹层 -->
          <el-dialog
            title="XML显示"
            :visible.sync="dialogVisible"
            width="65%"
            :before-close="handleClose"
            :append-to-body="true"
            :close-on-click-modal="false"
          >
            <div style="height:500px;overflow:auto">
              <pre v-highlight v-if="xml_L">
  <code >{{xml_val}}</code>
 </pre>
              <!-- <span>{{xml_val}}</span> -->
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="handleClose">取 消</el-button>
            </span>
          </el-dialog>
        </div>
        <div
          class="twoBox"
          :style="
            this.$route.query.Token
              ? 'top:50px;left:10px'
              : 'top: 100px;padding:15px'
          "
          v-if="false"
        >
          <div>
            <el-button size="small" @click="return_Home">返回首页</el-button>
            <el-button size="small" @click="return_Last">返回上一级</el-button>
          </div>
          <el-card
            class="box-card"
            style="width:18%;display:inline-block;margin:10px;"
            v-for="(val, i) in word_NewList"
            :key="val.label"
            @click.native="card_click(val)"
            shadow="hover"
          >
            <i
              :class="val.flag == 4 ? 'el-icon-tickets' : 'el-icon-folder'"
              style="font-size:36px;margin-right:30px"
            ></i>
            <el-tooltip
              class="item"
              effect="dark"
              :content="val.label"
              placement="top"
              :open-delay="1000"
            >
              <span
                style="font-size:18px;"
                v-text="val.label"
                class="card_style"
              ></span>
            </el-tooltip>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vkbeautify from "vkbeautify";
export default {
  name: "",
  data() {
    return {
      word_list: [],
      word_LastList_2: [],
      word_LastList_3: [],
      word_LastList_4: [],
      word_NewList: [],
      flag: 1,
      isLastItem: "",
      dialogVisible: false,
      xml_val: "",
      version: "", //版本号
      fileCode: "", //文档代码
      date: "", //日期
      xmlName: "", //文件名称.xml
      xml_loading: false, // 查看xml时的弹层
      xml_L: false, // 控制组件是否存在
      path: "",
      isFile: 0,
      items: {},
      FF: 1,
      block: "",
      后退: false,
      isShow: true,
    };
  },
  methods: {
    getlist() {
      this.isShow = false;
      this.$get(
        "/DocumentManage/Browse/EMRFile?path=" +
          this.path +
          "&isFile=" +
          this.isFile
      ).then((res) => {
        this.block = "";
        this.word_NewList = [];
        this.word_NewList = res.data;
        this.isShow = true;
        // console.log(this.path.split("\\"));
        if (this.path.split("\\").length == 2) {
          this.path = "";
        }

        for (var i = 0; i < this.path.split("\\").length - 1; i++) {
          this.block += this.path.split("\\")[i] + "\\";
        }
      });
      // console.log(this.word_NewList);
      // if (this.path.split("\\").length == 3) {
      //   this.block = ''
      // }
      // console.log(this.block);
    },
    getlist2() {
      this.$get(
        "/DocumentManage/Browse/EMRFile?path=" +
          this.path +
          "&isFile=" +
          this.isFile
      ).then((res) => {
        this.word_NewList = res.data;
      });
    },
    card_click(val) {
      // console.log(this.isFile);
      this.后退 = false;
      this.items = val;
      this.items.Flag == true ? (this.isFile = 1) : (this.isFile = 0);

      this.path = val.Path;
      if (this.FF == 1) {
        this.path = val.Path;
        this.FF = 1;
        this.getlist();
      }
      if (this.FF == 2) {
        this.xml_loading = true;
        this.xmlName = val.Name;
        this.xml_val = "";
        var that = this;
        this.$post("/DocumentManage/Browse/ReadXML?xmlPath=" + this.path).then(
          (res) => {
            if (res.code == 0) {
              let xml = vkbeautify.xml(res.data);
              that.xml_val = xml;
              that.xml_L = true;
              that.xml_loading = false;
              that.dialogVisible = true;
            }
          }
        );
        // this.xml_val = val.label
        return;
      }
      if (this.isFile == 1 && this.后退 == false) {
        this.FF = 2;
      }

      // if (this.isFile == 1) {
      //   this.xml_loading = true
      //   this.xmlName = val.label
      //   this.xml_val = ''
      //   this.$post("/v1/DocumentManage/Browse/ReadXML?xmlPath=" + this.path).then(res => {
      //     if (res.code == 0) {
      //       let xml = vkbeautify.xml(res.data)
      //       this.xml_val = xml
      //       this.xml_L = true
      //       this.xml_loading = false
      //       this.dialogVisible = true
      //     }
      //   })
      //   // this.xml_val = val.label
      //   return
      // }

      // if (val.flag == 4) {
      //   this.xml_loading = true
      //   this.xmlName = val.label
      //   this.xml_val = ''
      //   this.$post("/DocumentManage/Browse/LoadXML?version=" + this.version + "&fileCode=" + this.fileCode + '&date=' + this.date + "&xmlName=" + this.xmlName).then(res => {
      //     if (res.code == 0) {
      //       let xml = vkbeautify.xml(res.data)
      //       this.xml_val = xml
      //       this.xml_L = true
      //       this.xml_loading = false
      //       this.dialogVisible = true
      //     }
      //   })
      //   // this.xml_val = val.label
      //   return
      // } else {
      //   this.flag = 2
      //   this.isLastItem = val.flag
      //   if (val.flag == 1) {
      //     this.version = val.label
      //     this.word_NewList = []
      //     this.word_NewList = val.child
      //     this.word_LastList_2 = val.child
      //     return
      //   }
      //   if (val.flag == 2) {
      //     this.fileCode = val.Code
      //     this.word_NewList = []
      //     this.word_LastList_3 = val.child
      //     this.word_NewList = val.child
      //     return
      //   }
      //   if (val.flag == 3) {
      //     this.date = val.label
      //     this.word_NewList = []
      //     this.word_LastList_4 = val.child
      //     this.word_NewList = val.child
      //     return
      //   }
      // }
    },
    return_Home() {
      this.path = "";
      this.isFile = 0;
      this.FF = 1;
      this.getlist();
    },
    return_Last() {
      this.FF = 1;
      // console.log(this.isFile);
      this.后退 = true;
      this.block = this.block.substr(0, this.block.length - 1);
      // console.log(this.block);
      this.path = this.block;
      this.isFile = 0;
      this.getlist();

      // if (this.isLastItem == 1) {
      //   this.flag = 1
      //   return
      // }
      // if (this.isLastItem == 2) {
      //   this.word_NewList = this.word_LastList_2
      //   this.isLastItem -= 1
      //   return
      // }
      // if (this.isLastItem == 3) {
      //   this.word_NewList = this.word_LastList_3
      //   this.isLastItem -= 1
      //   return
      // }
    },
    handleClose() {
      this.xml_val = "";
      this.dialogVisible = false;
      this.isLastItem = 3;
      this.xml_L = false;
    },
  },
  mounted() {
    // document.getElementById("2").focus();
    this.getlist();
  },
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
  },
};
</script>
<style lang="scss">
.Document_browsing {
  -webkit-touch-callout: none; /* iOS Safari */

  -webkit-user-select: none; /* Chrome/Safari/Opera */

  -khtml-user-select: none; /* Konqueror */

  -moz-user-select: none; /* Firefox */

  -ms-user-select: none; /* Internet Explorer/Edge */

  user-select: none; /* Non-prefixed version, currently

not supported by any browser */

  .top-input {
    display: inline-block;
    width: 350px;
  }

  .box-top {
    margin-top: 15px;
    margin-left: 5px;
  }
  .card_style {
    display: inline-block;
    width: 73%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
